<template>
  <div>
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
      v-if="!type"
    ></topTitle>
    <div class="mainCon">
      <el-row class="examineStatus" v-if="payPlanType == 'MANUAL_NEED_AUDIT'">
        <el-row>
          <i
            class="iconfont iconyiqueren pass"
            v-if="planDetail.auditStatus === 'PASSED'"
          ></i>
          <i
            class="iconfont icondengdai pending"
            v-if="planDetail.auditStatus === 'WAIT_AUDIT'"
          ></i>
          <i
            class="iconfont iconshibai1 rejected"
            v-if="planDetail.auditStatus === 'REJECTED'"
          ></i>
          <i
            class="iconfont iconshengming cancelling"
            v-if="planDetail.auditStatus === 'WAIT_ABOLISH'"
          ></i>
          <i
            class="iconfont iconshibai1 cancelled"
            v-if="planDetail.auditStatus === 'ABOLISHED'"
          ></i>
          <span class="planStatus">申报进度：</span>
          <span
            class="planStatus pass"
            v-if="planDetail.auditStatus === 'PASSED'"
            >已通过</span
          >
          <span
            class="planStatus pending"
            v-if="planDetail.auditStatus === 'WAIT_AUDIT'"
            >待审核</span
          >
          <span
            class="planStatus rejected"
            v-if="planDetail.auditStatus === 'REJECTED'"
            >已驳回</span
          >
          <span
            class="planStatus cancelling"
            v-if="planDetail.auditStatus === 'WAIT_ABOLISH'"
            >待作废</span
          >
          <span
            class="planStatus cancelled"
            v-if="planDetail.auditStatus === 'ABOLISHED'"
            >已作废</span
          >
        </el-row>
        <el-row
          class="rejectedReason"
          v-if="planDetail.auditStatus === 'REJECTED'"
        >
          <span v-if="planDetail.rejectReason"
            >驳回原因：{{ planDetail.rejectReason }}</span
          >
        </el-row>
      </el-row>
      <div class="spacing"></div>
      <el-row class="contentInfo">
        <div style="padding: 20px 24px 30px">
          <el-row>
            <el-col :span="24">
              <div class="secondaryTitle secondaryTitleTheme">专户信息</div>
            </el-col>
          </el-row>
          <el-row class="detailInfoItemSty">
            <el-col :span="24" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >项目名称：</span
              >
              <span class="gridContent empContentSty color666 fontSizeF">{{
                planDetail.projectName || '--'
              }}</span>
            </el-col>
          </el-row>
          <el-row class="detailInfoItemSty">
            <el-col :span="8" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >施工方：</span
              >
              <span class="gridContent empContentSty color666 fontSizeF">{{
                planDetail.pbName || '--'
              }}</span>
            </el-col>
            <el-col :span="8" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >项目负责人：</span
              >
              <span class="gridContent empContentSty color666 fontSizeF">{{
                planDetail.managerName || '--'
              }}</span>
            </el-col>
            <el-col :span="8" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >项目负责人电话：</span
              >
              <span class="gridContent empContentSty color666 fontSizeF">{{
                planDetail.managerTel || '--'
              }}</span>
            </el-col>
          </el-row>
          <el-row class="detailInfoItemSty">
            <el-col :span="8" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >建设方：</span
              >
              <span class="gridContent empContentSty color666 fontSizeF">{{
                planDetail.pcName || '--'
              }}</span>
            </el-col>
            <el-col :span="8" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >专户银行：</span
              >
              <span class="gridContent empContentSty color666 fontSizeF">{{
                planDetail.bankName || '--'
              }}</span>
            </el-col>
            <el-col :span="8" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >专户账号：</span
              >
              <span class="gridContent empContentSty color666 fontSizeF">{{
                planDetail.account || '--'
              }}</span>
            </el-col>
          </el-row>
        </div>
        <div class="spacing"></div>
        <div style="padding: 20px 24px 30px">
          <el-row>
            <el-col :span="24">
              <div class="secondaryTitle secondaryTitleTheme">
                专户资金拨付计划
              </div>
            </el-col>
          </el-row>
          <el-row class="detailInfoItemSty">
            <el-col :span="8" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >拨付周期：</span
              >
              <span class="gridContent empContentSty color666 fontSizeF">{{
                planDetail.disburseCycleTypeDesc || '--'
              }}</span>
            </el-col>
            <el-col :span="8" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >拨付时间：</span
              >
              <span class="gridContent empContentSty color666 fontSizeF"
                >每月{{ planDetail.disburseTime || '--' }}号前</span
              >
            </el-col>
            <el-col :span="8" class="labelWidthSty">
              <span class="gridContent color333 fontSizeF fontWeight"
                >应拨付总额：</span
              >
              <span class="gridContent empContentSty color666 fontSizeF"
                >{{ planDetail.shouldDisburseTotal || '--' }}元</span
              >
            </el-col>
          </el-row>
          <!-- 列表 -->
          <el-table
            :data="tableList"
            :header-cell-style="{
              background: '#eef1f6',
              color: '#606266',
            }"
            style="border: 1px solid #dfe6ec; margin-top: 24px"
            highlight-current-row
            stripe
            v-loading="loading"
          >
            <el-table-column align="center" label="拨付周期">
              <template slot-scope="scope"
                >{{ scope.row.startDate }} - {{ scope.row.endDate }}</template
              >
            </el-table-column>
            <el-table-column
              align="center"
              prop="shouldDisburseTotal"
              label="本期应拨付(元)"
            />
            <el-table-column
              align="center"
              prop="realDisburseTotal"
              label="本期实拨付(元)"
            />
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty" v-show="isShow">
              <emptyTable emptyText="暂无相关信息" />
            </div>
          </el-table>
          <!-- filterField为搜索条件 -->
          <Pagination
            ref="pagination"
            @getList="getTableList"
            :filterField="filterField"
            :requestUrl="requestUrl"
            :pageSize="pageSize"
            :pageSizes="pageSizes"
          />
        </div>
        <div class="spacing"></div>
        <div style="padding: 20px 24px 30px">
          <div class="secondaryTitle secondaryTitleTheme">合同附件</div>
          <el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="24" class="labelWidthSty">
                <span
                  class="gridContent color333 fontSizeF fontWeight"
                  style="vertical-align: initial !important"
                  >工资性工程款拨付合同附件：</span
                >
                <el-link
                  type="primary"
                  @click="show()"
                  v-if="upLoadFile.length > 0"
                  >查看</el-link
                >
                <span
                  class="gridContent empContentSty color666 fontSizeF"
                  v-if="upLoadFile.length == 0"
                  >未上传</span
                >
              </el-col>
            </el-row>
            <el-dialog
              title="工资性工程款拨付合同附件"
              :visible.sync="seeUploadDialog"
              :modal-append-to-body="false"
              width="900px"
              :append-to-body="true"
            >
              <contractEnclosure :isShowType="false" :tableData="upLoadFile" />
            </el-dialog>
            <!-- <el-row>
                            <el-col :span="24" v-if="srcList.length">
                                <elementImage
                                    :upLoadFile="upLoadFile"
                                    :srcList="srcList"
                                    :oldSrcList="oldSrcList"
                                    :isDelFile="isDelFile"
                                    @changeSrcList="changeSrcList"
                                ></elementImage>
                            </el-col>
                           
                        </el-row> -->
          </el-row>
        </div>
      </el-row>
      <el-row
        style="padding: 30px 0; border-top: 1px solid #dbdbdb"
        class="btnBox"
        v-if="pageType === 'audit' && loginType === 'constructor'"
      >
        <el-button
          size="medium"
          class="commonBut saveBtn"
          @click="passAudit('pass')"
          >审核通过</el-button
        >
        <el-button
          size="medium"
          class="cancelBtn rejectFrom"
          @click="rejectAudit('reject')"
          >审核驳回</el-button
        >
        <el-button size="medium" class="cancelBtn" @click="goBack()"
          >取消</el-button
        >
      </el-row>
    </div>
    <el-dialog
      :title="editType === 'pass' ? '审核通过' : '审核驳回'"
      :visible="formVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="handleClose"
      custom-class="brand-dialog-min-width"
      width="500px"
    >
      <el-row style="padding: 24px" v-if="editType === 'pass'"
        >{{
          planDetail.auditStatus === 'WAIT_AUDIT'
            ? '审核通过该拨付计划后，系统会按照该拨付计划来预警'
            : '是否确认作废该计划'
        }}
      </el-row>
      <el-form
        v-else
        :model="formData"
        label-width="80px"
        :rules="formRules"
        ref="formData"
        class="formClass"
      >
        <el-form-item label="驳回原因" class="row-padding-bottom" prop="reason">
          <el-input
            type="textarea"
            v-model="formData.reason"
            @blur="formData.reason = changeValue($event)"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleClose" class="cancel">取消</el-button>
        <el-button
          type="primary"
          @click.native="confirmSubmit('formData')"
          class="save"
          :loading="isSaveLoading"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'allocationPlanDetail',
  props: {
    disbursePlanId: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loginType: '',
      pageType: '', //页面类型
      editType: '', //操作类型
      back: true,
      isDelFile: false,
      titleText: '查看专户拨付计划',
      // planStatus: "cancelled", //计划状态
      requestUrl: 'api-acc/cs/disburseaudit/expand/findDisbursePlanDetail',
      filterField: {
        disbursePlanId: '',
      },
      tableList: [],
      loading: true,
      isSaveLoading: false, //保存按钮
      planDetail: {}, //拨付详情
      uploadFile: [],
      oldSrcList: [], //预览地址
      srcList: [],
      accountId: '',
      formVisible: false,
      formData: {
        reason: '',
      },
      formRules: {
        //添加人员表单验证
        reason: [
          {
            required: true,
            message: '请输入驳回原因',
            trigger: 'blur',
          },
        ],
      },
      isAddRejectLoading: false,
      isShow: false, //列表空
      pageSizes: [5, 10, 15, 20],
      pageSize: 5,
      payPlanType: '', //系统拨付设置方式
      seeUploadDialog: false,
      upLoadFile: [],
    }
  },
  created() {
    this.pageType = this.$route.query.type ? this.$route.query.type : this.type
    if (this.$store.state.userType === 'COMPANY') {
      if (localStorage.getItem('judgeRoleCode') == 'constructor') {
        this.loginType = 'builder' //施工方
      } else if (localStorage.getItem('judgeRoleCode') == 'owner') {
        this.loginType = 'constructor' //建设方
      }
    }
    this.filterField.disbursePlanId = this.$route.query.disbursePlanId
      ? this.$route.query.disbursePlanId
      : this.disbursePlanId
    this.disbursesetup()
    this.getPlanDetail()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    disbursesetup() {
      return this.axios({
        method: 'get',
        url: 'api-acc/cs/disbursesetup/expand/get',
      })
        .then((response) => {
          this.payPlanType = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    goBack() {
      this.$router.push('/home/specialAccount/specialAccountList')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/specialAccount/specialAccountList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 获取详情
    getPlanDetail() {
      this.axios({
        method: 'post',
        url: 'api-acc/cs/disburseaudit/expand/findDisbursePlan',
        data: {
          disbursePlanId: this.filterField.disbursePlanId,
        },
      })
        .then((res) => {
          this.planDetail = res.data.result
          var len = this.planDetail.disbursePlanFiles.length
          this.upLoadFile = this.planDetail.disbursePlanFiles
          for (var i = 0; i < len; i++) {
            this.srcList.push(this.planDetail.disbursePlanFiles[i].url)
            this.oldSrcList.push(this.planDetail.disbursePlanFiles[i].url)
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取专户拨付计划数据失败',
            type: 'error',
          })
        })
    },
    /**
     * @description: 改变图片地址
     */
    changeSrcList(val) {
      this.srcList = val
    },

    //审核通过
    passAudit(type) {
      this.editType = 'pass'
      this.formVisible = true
    },
    //审核驳回
    rejectAudit(type) {
      this.editType = 'reject'
      this.formVisible = true
    },
    confirmSubmit(formRef) {
      if (this.editType === 'pass') {
        this.isSaveLoading = true
        this.submitForm()
      } else {
        this.$refs[formRef].validate((valid) => {
          if (valid) {
            this.isSaveLoading = true
            this.rejectForm()
          } else {
            return false
          }
        })
      }
    },
    submitForm() {
      let auditStatus = ''
      let data = {
        id: this.planDetail.id,
      }
      if (this.planDetail.auditStatus === 'WAIT_AUDIT') {
        data.auditStatus = 'PASSED'
      } else if (this.planDetail.auditStatus === 'WAIT_ABOLISH') {
        data.auditStatus = 'ABOLISHED'
        data.enabled = 'ABOLISHED'
      }
      this.axios({
        method: 'post',
        url: 'api-acc/cs/disburseaudit/expand/updateDisbursePlanAudit',
        data,
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.handleClose()
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            this.$router.push('/home/specialAccount/specialAccountList')
            this.$store.commit('GOBACK_NAME', {
              oldUrl: '/home/specialAccount/specialAccountList',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          this.isSaveLoading = false
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    rejectForm() {
      this.axios({
        method: 'post',
        url: 'api-acc/cs/disburseaudit/expand/updateDisbursePlanAudit',
        data: {
          id: this.planDetail.id,
          auditStatus: 'REJECTED',
          rejectReason: this.formData.reason,
        },
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.handleClose()
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            this.$router.push('/home/specialAccount/specialAccountList')
            this.$store.commit('GOBACK_NAME', {
              oldUrl: '/home/specialAccount/specialAccountList',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          this.isSaveLoading = false
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },

    handleClose() {
      if (this.$refs['formData']) {
        this.$refs['formData'].resetFields()
      }
      this.formVisible = false
    },
    show() {
      this.seeUploadDialog = true
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  padding: 0;
  height: calc(100% - 67px);
  overflow-y: auto;
}
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .searchInputWidth /deep/ .el-form-item__label {
    width: 82px;
  }
}
.form-item {
  width: 300px;
}
// /deep/ .el-dialog__body {
//     padding: 0;
// }
/deep/ .el-dialog__title {
  font-size: 18px;
  color: #424242;
}
.examineStatus {
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  padding: 24px;
  background: #f5f7fa;
  margin: 20px 24px;
  // border-bottom: 1px solid #dee5f4;
  .iconfont {
    font-size: 22px;
    margin-right: 10px;
  }
  .pass {
    color: #06ac15;
  }
  .pending {
    color: #ffac37;
  }
  .rejected {
    color: #d81e06;
  }
  .cancelling {
    color: #3d5266;
  }
  .cancelled {
    color: #3d5266;
  }
  .rejectedReason {
    font-size: 14px;
    color: #666;
    font-weight: 400;
    padding-left: 33px;
    margin-top: 5px;
  }
  .planStatus {
    line-height: 22px;
    vertical-align: top;
  }
}
.contentInfo {
  // padding: 14px 0;
  // padding-bottom: 24px;
  // .group-title {
  //     position: relative;
  //     padding-left: 20px;
  //     height: 48px;
  //     line-height: 48px;
  //     font-size: 16px;
  //     font-weight: bold;
  //     &::before {
  //         position: absolute;
  //         content: "";
  //         width: 4px;
  //         height: 24px;
  //         left: 0;
  //         top: 12px;
  //         background: #009588;
  //     }
  // }
  .subTitle {
    text-align: right;
    font-size: 14px;
    color: #333333;
    line-height: 42px;
    width: 120px;
  }
  .subContent {
    font-size: 14px;
    color: #666666;
    text-align: left;
    line-height: 42px;
    width: 59%;
  }

  .allocationDetail {
    font-size: 14px;
    color: #333333;
    margin-bottom: 24px;
  }
}
.labelWidth {
  display: inline-block;
  height: 36px;
  position: relative;
}
// .labelWidth::before {
//     content: "";
//     display: block;
//     position: absolute;
//     top: 19px;
//     left: -10px;
//     width: 5px;
//     height: 5px;
//     background: #009588;
//     border-radius: 50%;
// }
.imgStyle {
  margin-left: 12px;
  li {
    position: relative;
    margin-right: 20px;
    margin-bottom: 20px;
    .iconjian {
      position: absolute;
      right: -6px;
      top: -10px;
      font-size: 20px;
      cursor: pointer;
    }
    .el-image {
      cursor: pointer;
    }
  }
}
.btnBox {
  text-align: center;
  .rejectFrom {
    background: #3e5265;
    border-color: #3e5265;
    color: #fff;
    &:hover {
      background-color: #3e5265;
      border-color: #3e5265;
      color: #fff;
      opacity: 0.8;
    }
    &:focus {
      background-color: #3e5265 !important;
      border-color: #3e5265 !important;
      color: #fff !important;
    }
  }
}
.formClass {
  padding: 24px;
}
.btnBox {
  text-align: center;
}
.submitBtn {
  margin: 0;
}
.noDeduction {
  text-align: center;
  margin-top: 48px;
  font-size: 16px;
  font-weight: 400;
  img {
    width: 160px;
    margin-bottom: 15px;
  }
  .text {
    color: #3a3a3a;
  }
}
.cancelBtn {
  line-height: 36px;
  height: 36px;
  padding: 0;
}
</style>
